<template>
  <div class="product-list-outer product-list-item" style="height: 110px;">

    <template v-if="!$props.currProductLog.id">
      <span style="color: darkred">暂无信息...</span>
    </template>

    <template
      v-if="$props.currProductLog.shopProductId>0">
      <div class="line1" style="width: 100%; height: 63px;">
        <div class="right" style="width: 100%;">
          <div class="product-list-item-title">
            <!--            <div style="width: 50%; float: left;" class="ovd_s">-->
            <!--              商品: <span v-text="$props.currProductLog.shopProductName"></span>-->
            <!--            </div>-->
            <span style="display: inline-block; position:relative; top:-5px;">商品:</span>
            <div class="ovd_s" style="display: inline-block; margin-left: 5px; max-width: 85%; font-weight: bold;" type="warning" v-text="$props.currProductLog.shopProductName"></div>
            <div class="c"></div>
          </div>
          <div class="product-list-item-title">
            <!--            <div style="width: 50%; float: left;" class="ovd_s">-->
            <!--              商品: <span v-text="$props.currProductLog.shopProductName"></span>-->
            <!--            </div>-->
            <span style="display: inline-block; position:relative; top:-5px;">型号:</span>
            <div class="ovd_s" style="display: inline-block; margin-left: 5px; max-width: 85%; padding: 0px 5px; background: #ffe6de; border: 1px solid #d76852; border-radius: 5px;" type="warning" v-text="$props.currProductLog.shopProductModel"></div>
            <div class="c"></div>
          </div>
          <div class="product-list-item-model">
            操作类型:
            <el-tag type="success" v-if="$props.currProductLog.type.id==='ProductUp'"> {{ $props.currProductLog.type.name }} </el-tag>
            <el-tag type="danger" v-if="$props.currProductLog.type.id==='ProductDown'"> {{ $props.currProductLog.type.name }} </el-tag>
          </div>

          <div class="product-list-item-price-box">
            备注信息:
            <span class="ovd_s" style="max-width: 80%; color: #888888" v-text="$props.currProductLog.info?$props.currProductLog.info:'-'"></span>
            <div class="c"></div>
          </div>
        </div>
        <div class="c"></div>
      </div>
      <div class="line2" align="right">
        <span v-text="$props.currProductLog.createdTime"></span>
      </div>
    </template>


  </div>
</template>

<script>
export default {
  name: 'ProductLogListItem',
  props: {
    currProductLog: Object,
  },
  data: function () {
    return {
    }
  },
  beforeMount () {
  },
  methods: {
  }
}
</script>

<style scoped>
.product-list-outer {
  height: 150px;
  width: 100%;
  margin-top: 3px;
  background: #FFFFFF
}

.product-list-outer .line1 {
  height: 123px;
  width: 100%;
  float: left
}

.product-list-outer .line1 > .left {
  float: left
}

.product-list-outer .line1 > .right {
  float: left;
  line-height: 22px;
}

.product-list-outer > .line2 {
  height: 22px;
  line-height: 22px;
  width: 98%;
  float: left;
  text-align: right;
  color: #888888;
}

.product-list-outer > .line2 > button {
  margin-right: 5px;
  padding: 0px 5px;
}

.product-list-item-price-box{
  line-height: 25px;
}
.product-list-item-title{
  font-size: 12px;
  line-height: 20px;
}
</style>
